import React, { useState, useEffect } from 'react'
import { Select, Button, DatePicker, Form, Radio } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import moment from 'dayjs'
import quarterOfYear from 'dayjs/plugin/quarterOfYear';
import './index.scss'


const Filter = ({
  devInfo,
  onQuery,
  paramsData,
  setParamsData,
}) => {
  moment.extend(quarterOfYear)
  //设备类型
  const [devType, setDevType] = useState([])
  const [industryNumber, setIndustryNumber] = useState(8)
  const [dateFormatsData, setDateFormatsData] = useState('YYYY-MM-DD HH')
  const [picks, setPicks] = useState("date")
  //处理设备类型
  const convertOptions = (arr) => {
    return arr.map(item => ({
      value: item.dev_type,
      label: item.dev_type_name,
    }));
  }

  useEffect(() => {
    if (devInfo && devInfo.length > 0) {
      const converted = convertOptions(devInfo)
      setDevType(converted)
    }
  }, [devInfo]);

  const onQueryChange = (v, t) => {
    if (t === 'time' && Array.isArray(v)) {
      const timeType = paramsData.time_type
      setParamsData((state) => {
        state.start_time = timeType == "5" ? state.start_time = moment(v[0]).startOf('quarter').format('YYYY-MM-DD 00:00:00') : moment(v[0]).format("YYYY-MM-DD 00:00:00"),
          state.end_time = timeType == "5" ? state.end_time = moment(v[1]).endOf('quarter').format('YYYY-MM-DD 23:59:59') : moment(v[1]).format('YYYY-MM-DD 23:59:59')
        return {
          ...state
        }
      })

    }
    if (t === 'industry') {
      setParamsData((state) => {
        setIndustryNumber(v)
        state.data_type_id = v

        return {
          ...state
        }
      })
    }
    if (t === 'statues') {
      setParamsData((state) => {
        const newState = onTimeTypeChange(v, state)
        return {
          ...newState
        }
      })
    }
    if (t === 'dev_type') {
      setParamsData((state) => {
        state.dev_type = v
        return {
          ...state,
        }
      })
    }
  }
  const onTimeTypeChange = (v, state) => {
    state.time_type = v;

    switch (v) {
      case '2':
        state.start_time = moment(state.start_time).format('YYYY-MM-DD HH:00:00');
        state.end_time = moment(state.end_time).format('YYYY-MM-DD HH:59:59');

        setDateFormatsData('YYYY-MM-DD HH');
        setPicks("date")
        break;

      case '3':
        state.start_time = moment(state.start_time).format('YYYY-MM-DD 00:00:00');
        state.end_time = moment(state.end_time).format('YYYY-MM-DD 23:59:59');

        setDateFormatsData('YYYY-MM-DD');
        setPicks("date")
        break;

      case '4':
        state.start_time = moment(state.start_time).add(-1, 'M').format('YYYY-MM-DD 00:00:00');
        state.end_time = moment(state.end_time).format('YYYY-MM-DD 23:59:59');

        setDateFormatsData('YYYY-MM');
        setPicks("month")
        break;

      case '5':
        state.start_time = moment(state.start_time).startOf('quarter').format('YYYY-MM-DD 00:00:00');
        state.end_time = moment(state.end_time).endOf('quarter').format('YYYY-MM-DD 23:59:59')
        setDateFormatsData('YYYY-MM-DD');

        // setDateFormatsData('Q');
        setPicks("quarter")
        break;

      case '6':
        state.start_time = moment(state.start_time).add(-1, 'y').format('YYYY-MM-DD 00:00:00');
        state.end_time = moment(state.end_time).format('YYYY-MM-DD 23:59:59');

        setDateFormatsData('YYYY');
        setPicks("year")
        break;

    }

    return state;
  }

  const click = () => {
    onQuery && onQuery()
  }
  if (!devInfo[0]?.dev_type_name) return

  return (
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      <Form>
        <Form layout="inline">
          <Form.Item label="时间">
            <DatePicker.RangePicker
              showTime={dateFormatsData == 'YYYY-MM-DD HH' ? true : false}
              showNow
              picker={picks}
              defaultValue={[
                moment(paramsData.start_time),
                moment(paramsData.end_time)
              ]}
              value={[
                moment(paramsData.start_time),
                moment(paramsData.end_time)
              ]}
              format={dateFormatsData}
              cellRender={(current, info) => {
                if (info.type !== 'quarter') return info.originNode;
                // console.log(moment(current).quarter(),"current--");
                const quarterText = (num) => {
                  return (
                    <div>
                      第{num}季度
                    </div>
                  )
                }
                return (
                  <div className="ant-picker-cell-inner" >
                    {quarterText(moment(current).quarter())}
                  </div>
                );
              }}
              popupClassName={'quarter'}
              // presets={[
              //   {
              //     label: '昨天',
              //     value: [moment().subtract(1, 'day'), moment()]
              //   },
              //   {
              //     label: '一周',
              //     value: [moment().subtract(7, 'day'), moment()]
              //   },
              //   {
              //     label: '一个月',
              //     value: [moment().subtract(30, 'day'), moment()]
              //   }
              // ]}
              onChange={(v) => {
                onQueryChange(v, 'time')
              }}
            />

          </Form.Item>

          <Form.Item label="时间粒度">
            {industryNumber && industryNumber === 8 ? (
              <Select
                allowClear
                placeholder={`请选择`}
                defaultValue={paramsData.time_type}
                onChange={(v) => onQueryChange(v, 'statues')}
              >
                {/* <Select.Option value={'1'} key={'1'}>
                  刻钟
                </Select.Option> */}
                <Select.Option value={'2'} key={'2'}>
                  小时
                </Select.Option>
                <Select.Option value={'3'} key={'3'}>
                  日
                </Select.Option>
                <Select.Option value={'4'} key={'4'}>
                  月
                </Select.Option>
                <Select.Option value={'5'} key={'5'}>
                  季度
                </Select.Option>
                <Select.Option value={'6'} key={'6'}>
                  年
                </Select.Option>
              </Select>
            ) : (
              <Select
                allowClear
                placeholder={`请选择`}
                defaultValue={'2'}
                onChange={(v) => onQueryChange(v, 'statues')}
              >
                <Select.Option value={'2'} key={'2'}>
                  小时
                </Select.Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item label="用电类型">
            <Select
              allowClear
              placeholder={`请选择`}
              value={paramsData?.dev_type}
              onChange={(v) => onQueryChange(v, 'dev_type')}
              options={devType}>
            </Select>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              onClick={click}
              icon={<SearchOutlined></SearchOutlined>}
            >
              查询
            </Button>
          </Form.Item>
        </Form>
      </Form>

    </div>
  )
}

export default Filter
